<template>
  <div id="app">
    <el-col :span="3.5">
      <h2 class="flex align-center">
        <img src="./assets/images/feed-center.png" alt="" />
        反馈中心
      </h2>
      <el-menu
        :default-active="this.$route.path"
        class="el-menu-vertical-demo"
        background-color="#FAFAFA"
        text-color="#C0C0C0"
        active-text-color="#FFFFFF"
        router
      >
        <el-menu-item index="/">
          <img
            v-show="noFinishActive"
            src="./assets/images/no-finish.png"
            alt=""
          />
          <img
            v-show="!noFinishActive"
            src="./assets/images/no-finish-g.png"
            alt=""
          />
          <span slot="title">未完结信息</span>
        </el-menu-item>
        <el-menu-item index="/finish">
          <img v-show="finishActive" src="./assets/images/finish.png" alt="" />
          <img
            v-show="!finishActive"
            src="./assets/images/finish-g.png"
            alt=""
          />
          <span slot="title">已完结信息</span>
        </el-menu-item>
        <el-menu-item index="/feed">
          <img v-show="feedActive" style="padding-bottom:2px;" src="./assets/images/feed.png" alt="" />
          <img v-show="!feedActive" style="padding-bottom:2px;" src="./assets/images/feed-g.png" alt="" />
          <span slot="title">内部反馈<span class="title-li" style="font-weight:400;">(我要反馈)</span></span>
        </el-menu-item>
        <el-menu-item index="/column">
          <img v-show="columnActive" style="padding-bottom:2px;" src="./assets/images/column.png" alt="" />
          <img v-show="!columnActive" style="padding-bottom:5px; margin-right:10px" src="./assets/images/column-g.png" alt="" />
          <span slot="title">反馈类目<span class="title-li" style="font-weight:400;">(设定类目)</span></span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-main>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      noFinishActive: true,
      finishActive: false,
      feedActive: false,
      columnActive: false,
    };
  },
  created() {
    let path = this.$route.path
    this.transform(path);
  },  
  watch: {
    $route(to) {
      this.transform(to.path);
    },
  },
  methods: {
    transform(path) {
      switch (path) {
        case "/":
          this.noFinishActive = true;
          this.finishActive = false;
          this.feedActive = false;
          this.columnActive = false;
          break;

        case "/finish":
          this.noFinishActive = false;
          this.finishActive = true;
          this.feedActive = false;
          this.columnActive = false;
          break;

        case "/feed":
          this.noFinishActive = false;
          this.finishActive = false;
          this.feedActive = true;
          this.columnActive = false;
          break;

        case "/column":
          this.noFinishActive = false;
          this.finishActive = false;
          this.feedActive = false;
          this.columnActive = true;
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style lang="stylus">
@import './style.css';

* {
  padding: 0;
  margin: 0;
}

h2 {
  margin: 30px 0 27px 24px;
  font-size: 20px;
}

h2 img {
  margin-right: 8px;
}

.el-menu-item {
  padding: 0 10px 0 25px !important;
  font-size: 18px !important;
  font-weight: 700;
  img {
    margin-right: 12px;
  }
}

.is-active {
  background-color: #41D2D4 !important;
}

#app {
  height: 100vh;
  background: #fff;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
}

.el-col {
  height: 100%;
  background-color: #EDEDED;
}

.el-main {
  height: 100vh;
  padding: 0 !important;
  overflow-y: scroll !important;
}

.title-li{
  display: inline-block;
  padding-bottom: 5px !important
}
</style>
